<div>
    <ul class="security-list">
        <li *ngFor="let item of dataList">
            <div class="security-head">
                <div class="security-head-left">
                    <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="checkedAll(item)"></label>
                    <img src="../../assets/img/logo-small.png" class="security-logo" />
                    <div class="security-text">
                        <h3>{{item.name}}</h3>
                        <p>共 5 项权限, 3 项关闭, 2 项开启</p>
                    </div>
                </div>
                <div class="security-head-right">
                    <nz-select style="width: 120px" [(ngModel)]="item.cz" nzAllowClear nzPlaceHolder="修改权限">
                        <nz-option nzValue="Allowed" nzLabel="允许"></nz-option>
                        <nz-option nzValue="Prevented" nzLabel="阻止"></nz-option>
                        <nz-option nzValue="UnSet" nzLabel="消除设置"></nz-option>
                    </nz-select>
                </div>
            </div>
            <div class="security-body">
                <div class="permission-list">
                    <div *ngFor="let child of item.list">
                        <label nz-checkbox [(ngModel)]="child.checked">{{child.permissionName}}</label>
                        <span *ngIf="child.status === 'Allowed'" style="color: #14CE79;">(已允许)</span>
                        <span *ngIf="child.status === 'Prevented'" style="color: #FF5555;">(已阻止)</span>
                        <span *ngIf="child.status === 'UnSet'" style="color: #999999;">(未设置)</span>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>